@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;src:local('Open Sans Bold'),local('OpenSans-Bold'),url('fonts/open-sans-700.eot'),url('fonts/open-sans-700.woff2') format('woff2')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Open Sans Regular'),local('OpenSans-Regular'),url('fonts/open-sans-regular.eot'),url('fonts/open-sans-regular.woff2') format('woff2')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;src:local('Open Sans SemiBold'),local('OpenSans-SemiBold'),url('fonts/open-sans-600.eot'),url('fonts/open-sans-600.woff2') format('woff2')}

.sf-blazor-home * {
    font-family: 'Open Sans', 'sbicons' !important;
}
.sf-blazor-home ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.sf-blazor-home a {
    text-decoration: none;
}
.sf-hide {
    display: none;
}
.sf-header {
    width: 100%;
    height: 80px;
    position: fixed;
    background-color:#fff;
    top:0;
    z-index:1000;
}
.sf-header.active {
    box-shadow: 0 0 3px 3px #ececec!important;
}

.sf-header-left {
    float: left;
    width: 490px;
}
.header-logo .syncfusion-logo {
    height: 40px;
    float: left;
    width: 175px;
    margin: 20px;
    margin-right: 0px;
}
.header-logo a span {
    font-size: 16px;
    color: #2C357C;
    letter-spacing: 0;
    margin-top: 36px;
    float: left;
    font-weight: 600;
}
.sf-header-right {
    float: right;
    display: table;
}
.sf-table-cell{
    display:table-cell;
    vertical-align: middle;
}
.sf-blazor-home .desktop-search-container.sf-table-cell .sf-search-container {
    height:44px !important;
}
.sf-header-items.sf-table-cell .e-btn {
    width: 133px;
    height: 44px;
    margin: 16px;
    border-radius: 22px;
    font-size: 16px;
    background-color: #0A76FF !important;
}
.sf-blazor-home .desktop-search-container {
    height: 44px;
    margin: 18px 16px;
    top: 0;
    width: 450px;
    opacity: 1;
}
@media(max-width: 1125px) {
    .desktop-search-container {
        width: 400px !important;
    }
}
@media (max-width: 1075px) {
    .desktop-search-container {
        width: 350px !important;
    }
}
.sf-banner-image {
    height: 771px;
    margin-top:80px;
}
.sf-container {
    display: table;
    width: 60%;
    margin: 0 auto;
}
.sf-banner-content {
    width: 545px;
    margin-top: 128px;
}
.sf-banner-buttons {
    margin-top: 55px;
    height: 48px;
}
.sf-banner-content h1{
    color: #FFFFFF;
    font-size: 56px;
    line-height: 70px;
    letter-spacing: 0;
    font-weight: 700;
}
.sf-banner-content h1 span{
    color: #FFBC00;
    cursor: pointer;
}
.sf-banner-image .demo-btn {
    float: left;
}
.sf-banner-image .demo-btn .e-btn {
    width: 142px;
    box-shadow: 0 8px 20px 0 rgba(93,25,203,0.60);
}
.sf-banner-image .demo-btn .e-btn.e-primary {
    background-color: #FFBC00;
    color: #250E68;
    border-color:transparent !important;
    box-shadow:none !important;
}
.sf-banner-image .sf-banner-buttons .e-btn {
    height: 44px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    padding: 2px;
}
.sf-banner-image .demo-btn .e-btn:hover {
    background-color: #ffca36 !important;
    color: #000 !important;
}
.sf-banner-image .sf-banner-buttons .e-btn:hover {
    border-color:transparent !important;
    box-shadow: none;
}
.sf-banner-image .demo-btn .e-btn:active,
.sf-banner-image .sf-banner-buttons .e-btn:focus {
    border-color: transparent !important;
    background-color: #ECAE00 !important;
    box-shadow: none !important;
    color: #000 !important
}
.trusted-companies {
    height: 160px;
    margin-top: 174px;
    background: #FFFFFF;
    box-shadow: 0 2px 34px 0 rgba(80,21,174,0.16);
    border-radius: 13px;
}
.trusted-companies span {
    font-weight: 600;
    font-size: 18px;
    color: #000000;
    text-align: center;
    line-height: 19px;
    padding: 35px 40px;
    display: block;
}
.sf-trusted-companies {
    height: 100%;
}
.sf-home-content {
    margin-top: 155px;
}
.sf-home-content h2 {
    font-size: 33px;
    color: #171E35;
    text-align: center;
    font-weight: 600;
}
.sf-home-content .popular-components h2 {
    margin-bottom: 74px;
}
.sf-popular-components {
    margin-bottom: 81px;
}
.sf-popular-components,
.sf-popular-component,
.sf-popular-component .e-card  {
    height: 112px;
}
.sf-popular-component {
    float: left;
    width: 15.7%;
}
.sf-popular-component:not(:first-child) {
    margin-left: 1.1%;
}
.sf-popular-component .e-card {
    box-shadow: 0 6px 16px 0 rgba(20,12,162,0.08);
    border-radius: 12px;
    border-color: transparent;
    cursor: pointer;
    position: relative;
    overflow: visible;
    transition: transform .2s;
}
.sf-popular-component .e-card:hover .e-card-image{
     transform: scale(1.1);
}
.sf-popular-component .e-card:hover {
    border-color: transparent;
}
.sf-popular-component .e-card-image {
    min-height: 90px !important;
    background-repeat: no-repeat;
    background-size: 100% 100% !important;
    top: -32.5px;
}
.sf-popular-component .e-card-content {
    font-weight: 700;
    font-size: 16px !important;
    color: #171E35 !important;
    text-align: center;
    padding: 0px !important;
    top: -21px;
    position: relative;
    overflow:visible !important;
}
.sf-components-list h2 {
    margin-bottom: 12px;
}
.sf-components-description {
    width: 90.6%;
    font-size: 16px;
    color: #6F7998;
    text-align: center;
    line-height: 26px;
    margin: 0 auto;
    margin-bottom: 40px;
}
.sf-components {
    margin: 0 auto;
    width: 90.6%;
}
.sf-component-col {
    width: 25%;
    float: left;
    padding: 0 2.5%;
}
.sf-catagory {
    font-size: 19px;
    color: #262E48;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.sf-components ul li {
    margin-bottom: 20px;
}
.sf-components ul li:last-child {
    margin-bottom: 35px;
}
.sf-components ul .sf-component-name {
    font-size: 16px;
    color: #0A76FF;
    font-weight: 600; 
}
.sf-components ul .sf-component-name:hover {
    color: #23527c;
}
.sf-components ul .sf-preview {
    background: rgba(121, 37, 255, 0.1);
    border-radius: 6px;
    font-size: 10px;
    color: #7925FF;
    padding: 4px 7px;
    font-weight: 700;
    margin-left: 6px;
}
.sf-ad-strip {
    display: table;
    margin-top: 74px;
    margin-bottom: 80px;
    width: 100%;
}
.sf-ad-strip .sf-container{
    width: 70%;
}
.sf-ad-strip .sf-ad-strip-img {
    height: 454px;
    width: 50%;
    float: left;
    transition: transform .2s;
}
.sf-ad-strip-content {
    float: left;
    width: 50%;
    padding-left: 2px;
}
.sf-ad-strip-content h3 {
    font-weight: 600;
    margin-top: 65px;
    font-size: 33px;
    color: #2D3448;
    letter-spacing: 0;
    line-height: 45px;
}
.sf-ad-strip-content ul {
    margin-top: 38px;
    list-style: none;
    padding: 0px;
    margin-bottom: 0px;
}
.sf-ad-strip-content ul li { 
    font-size: 16px;
    color: #3A435E;
    letter-spacing: 0;
    margin-bottom: 23px;
}
.sf-ad-strip-content ul li:last-child { 
    margin-bottom: 40px;
}
.sf-ad-strip-tick {
    margin-right: 12px;
    font-weight: 700;
    font-size: 18px;
    float: left;
}
.sf-ad-strip-content ul li span:last-child {
    display: block;
}
.sf-ad-strip-button {
    margin-bottom: 65px;
}
.sf-ad-strip-button .e-btn {
    background-color: #0a76ff !important;
    border: 1px solid #0a76ff !important;
    box-shadow: 0 6px 11px 0 rgba(16,16,73,0.36) !important;
    border-radius: 4px;
    font-size: 16px;
    font-weight:600;
    color: #FFFFFF !important;
    letter-spacing: 0;
    padding: 8px 24px;
    height: 44px;
    width: 171px;
    animation: Breathing 5s ease-out infinite normal;
}
.sf-ad-strip-button .e-btn .e-btn-icon {
    font-size: 18px;
}
.sf-showcase h2 {
    font-size: 33px;
    color: #FFFFFF;
    text-align: center;
    font-weight: 700;
    line-height: 43px;
    position: absolute;
    margin-top: 80px;
    width: 50%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 1000;
}
.sf-showcase-demo {
    height: 750px;
    overflow: hidden;
    margin-top: 35px;
    position: relative;
}
.sf-showcase-bg.sf-prev-showcase {
    position: absolute;
    left: -100%;
}
.sf-showcase-bg.appointment-planner {
    background-image: linear-gradient(225deg, #794FD5 0%, #3938D9 100%);
}
.sf-showcase-bg.expense-tracker {
    background-image: linear-gradient(225deg, #7300B3 0%, #6F31D8 100%);
}
.sf-showcase-bg.health-tracker {
    background-image: linear-gradient(225deg, #6DBB0C 0%, #05A631 100%);
}
.sf-showcase-bg.document-explorer {
    background-image: linear-gradient(224deg, #6A15AE 0%, #215BC7 100%);
}
.sf-showcase-bg.diagram-builder {
    background-image: linear-gradient(58deg, #0F52CC 0%, #4D2CCA 100%);
}
.sf-showcase-bg,
.sf-showcase-bg-container {
    height: 100%;
}
.sf-showcase-bg {
    position: absolute;
    width: 100%;
}
.sf-showcase-container {
    position: absolute;
    width: 100%;
    height: 750px;
}
.sf-showcase-transition {
    transition: transform 1s;
}
.sf-showcase-bg-container {
    position: relative;
}
.sf-showcase-img {
    background-position: center top;
    background-size: auto 100%;
    background-repeat: no-repeat;
    height: 100%;
}
.sf-showcase-content {
    width: 23%;
    position: absolute;
    top: 0;
    margin-left: 8%;
    margin-top: 324px;
}
.sf-showcase-content h3 {
    font-size: 28px;
    color: #FFFFFF;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 33px;
}
.sf-showcase-description {
    font-size: 16px;
    color: #FFFFFF;
    line-height: 24px;
    margin-bottom: 24px;
    min-height: 96px;
}
.showcase-demo-btn {
    float: left;
    margin-right: 12px;
}
.sf-showcase-buttons {
    margin-bottom: 60px;
    width:500px;
}
.sf-showcase-buttons .e-btn {
    padding: 13px 29px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
}
.showcase-demo-btn .e-btn {
    background: #FFFFFF !important;
    color: #0A132E !important; 
    border-color:transparent !important;
    box-shadow: none !important;
}
.sf-showcase-progress .e-btn:hover, .sf-showcase-progress .e-btn:focus, .sf-showcase-progress .e-btn:active {
    border-color: transparent !important;
    box-shadow: none !important;
}
.showcase-demo-btn .e-btn:focus,.showcase-demo-btn .e-btn:active
{
    box-shadow: none !important;
}
.showcase-github-btn .e-btn{
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
    padding: 2px 16px;
}
.showcase-demo-btn .e-btn:hover,
.sf-showcase-progress .e-btn:hover {
    border-color: transparent !important;
    background: #FFFFFF !important;
    opacity: .8;
}
.showcase-github-btn .e-btn:focus{
   background-color: transparent !important;
}
.showcase-github-btn .e-btn:hover {
    background: rgba(10, 19, 46, 0.1) !important;
}
.showcase-github-btn .e-btn .sf-github-logo-icon {
    margin-right: 14px;
    padding: 0px !important;
    margin-left: 0px !important;
    height: 48px;
}
.sf-showcase-steps {
    height: 40px;
    width: 115px;
    float: left;
}
span.sf-right-arrow-icon {
    padding-bottom: 4px;
}
span.sf-showcase-step {
    width: 8px;
    height: 8px;
    float: left;
    background: rgba(255,255,255,0.20);
    border-radius: 4px;
    margin-right: 15px;
    vertical-align: middle;
    position: relative;
    top: 16px;
}
span.sf-showcase-step.sf-showcase-progress-selected {
    background: #FFFFFF;
}
.sf-showcase-buttons .e-btn:hover, 
.sf-showcase-buttons .e-btn:active, 
.sf-showcase-buttons .e-btn:focus{
    border-color:transparent !important;
    box-shadow: none;
}
.sf-showcase-progress .e-btn {
    opacity: 0.6;
    background: #FFFFFF !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 3 !important;
    margin-left: 20px;
    color: #0A132E !important;
    border-color: transparent !important;
}
.sf-g2-container {
    height: 255px;
    background: #252532;
}
.sf-g2-review {
    padding: 50px 0px;
    display: table;
    width: 917px;
}
.sf-g2-right h3 {
    font-size: 44px;
    color: #FFFFFF;
    letter-spacing: 0;
    font-weight: 700;
    margin-bottom: 30px;
}
.sf-g2-right .e-btn {
    height: 45px;
    width: 170px;
    font-size: 19px;
    background-color: #0073dc !important;
    font-weight: 600;
    letter-spacing: .11px;
    text-align: center;
}
@media (max-width: 1279px) and (min-width: 760px) {
    .sf-g2-right h3 {
        font-size: 26px !important;
    }
}
.sf-g2-review,
.sf-g2-left,
.sf-g2-img {
    height: 100%;
}
.sf-g2-left {
    width: 341px;
    display: table;
    padding-right: 61.5px;
    margin: 0px 61.5px 0px 50px;
    border-right: 2px solid #545464;
}
.sf-g2-img {
    background-size: 207px 155px !important;
    display: table-cell;
}
.sf-g2-right {
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}
.sf-g2-right h3 {
    font-size: 32px;
    color: #FFFFFF;
    letter-spacing: .18px;
    line-height: 40px;
    font-weight: 700;
    margin-bottom: 24px;
    margin-top: 0px;
}
.sf-right-arrow-icon::before {
    content: "\e901";
    color: #0A132E;
}
.sf-github-logo-icon::before {
    content: "\e902";
    font-size: 32px;
}
.sf-ad-strip-tick::before {
    content: "\e912";
    color: #00CD4F;
}
.sf-gt-icon::before {
    content: "\e91b";
}
.sf-home-footer {
    background: #F4F6FC;
    overflow: hidden;
}
.sf-footer-links {
    padding-top: 83px;
    margin-bottom: 80px;
}
.sf-footer-col {
    width: 20%;
    float: left;
    padding-left: 3.5%;
}
.sf-footer-title {
    font-size: 12px;
    color: #171E35;
    letter-spacing: 0.08px;
    font-weight: 700;
    margin-bottom: 11px;
}
.sf-home-footer a {
    font-size: 14px;
    color: #3A435E;
    text-align: left;
    line-height: 27px;
}
.sf-home-footer a:hover,
.sf-social-media i:hover {
    color: #747e9c;
}
.sf-footer-contact {
    padding-bottom: 124px;
}
.sf-footer-copyright {
    width: 60%;
    float: left;
    padding-left: 3.5%;
}
.sf-footer-syncfusion-logo {
    margin-top: 10px;
}
.sf-footer-syncfusion-logo a span {
    font-size: 40px;
    color: #171E35;
}
.sf-contact-details {
    width: 40%;
    float: left;
}
.sf-contact-fax,
.sf-contact-mail {
    width: 50%;
    float: left;
    padding-left: 8.5%;
}
.sf-social-media {
    width: 100%;
    padding-top: 15px;
    float: left;
    padding-left: 8.5%;
}
.sf-footer-logo-img::before {
    content: '\e911';
}
.sf-facebook-icon::before {
    content: '\ea90';
}
.sf-twitter-icon::before {
    content: '\ea96';
}
.sf-linkedin-icon::before {
    content: '\eaca';
}
.sf-youtube-icon::before {
    content: '\ea9d';
}
.sf-social-media i {
    font-size: 18px;
    float: left;
    padding-right: 21.5px;
    margin-left: -3px;
    color: #171E35;
}
.sf-contact-mail a {
    color: #0A76FF;
}
.sf-contact-mail a:hover {
    color:#23527c;
}
@keyframes Breathing {
    0% {
      transform: scale(0.9);
    }
  
    25% {
      transform: scale(1);
    }
  
    60% {
      transform: scale(0.9);
    }
  
    100% {
      transform: scale(0.9);
    }
}

@media (max-width: 1250px) and (min-width: 1024px) {
    .showcase-demo-btn {
        float: none;
    }
    .showcase-github-btn {
       margin-top: 12px;
    }
}

@media screen and (max-width:1250px){
    .sf-banner-image .sf-container {
        width: 87.5% !important
    }
}

@media (max-width: 1850px) {
    .sf-blazor-home .sf-trusted-companies {
        background-size: 95% !important;
    }
    .sf-ad-strip .sf-container {
        width: 90%;
    }
    .showcase-github-btn {
        display: inline-block;
    }
}